<template>
	<view class = "notpay">
		<view class="header">
			<image @tap = "backCart" src="../../../assets/images/arr-l.png" mode=""></image>
			<text>待付款</text>
		</view>
		<view class="second">
			等待支付
		</view>
		<view class="address" @tap = "goAddress">
			<text>电话:{{tel}}</text>
			<text>收货地址</text>
		</view>
		<view class="headers">
			<text>订单编号</text>
			<text>等待支付</text>
		</view>
		<view class="orderlist">
			
			<view class="ordedetail" v-for = "item in orderListDetial" :key = "item.id">
				<view class="left">
					<image :src="item.cover_img" mode=""></image>
				</view>
				<view class="middle">
					<text>名称:{{ item.gname }}</text>
					<text>编号:{{ item.sku_code}}</text>
					<text>规格:{{ item.color_text }}</text>
				</view>
				<view class="right">
					<text>￥{{ item.price }}</text>
					<text>x{{ item.count }}</text>
				</view>
			</view>
			<view class="footer">
				<text>合计:{{ totalPrice }}</text>
			</view>
			<view class="pay" @tap = "goPay">
				<button type="default">确认付款</button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js"
	export default {
		data() {
			return {
				orderListDetial:[], // 商品的详情列表
				totalPrice:'',  //商品总价
				totalCount:'' ,// 商品总数量
				freight:'', // 订单运费
				userId:'', // 用户id
				address:{
					
				},
				tel:'',
				
			};
		},
		onLoad() {
			console.log(uni.getStorageSync("order_key"));
			this.orderListDetail();
			// this.userId = JSON.parse(uni.getStorageSync('token')).id;
			// console.log(this.userId);
			
		},
		onShow() {
			this.address = uni.getStorageSync("address");
			console.log(this.address,'地址电话');
			this.tel = this.address.tel;
			this.addressId = this.address.id;
			console.log(this.addressId,"地址id");
			
			// var addressId = [];
			// 	this.address.forEach(item => {
			// 		addressId.push(item.id);
			// 	})
			// 	console.log(addressId,"地址id");
			// 	this.addressId = addressId[0];
			// 	console.log(this.addressId,"d地址id");
				// this.addressId=this.address[0].id;
				// console.log(this.addressId,"地址id");
				// this.tel=this.address.tel
			
			// console.log(addressObj);
		},
		methods:{
			backCart(){
				uni.navigateBack({
					delta:1
				})
			},
			goAddress() {
				uni.navigateTo({
					url:'/pages/mine/address/address/address'
				})
			},
			orderListDetail() {
				var orderList = uni.getStorageSync("order_key");
				console.log(orderList);
				//商品总价格
				this.totalPrice = orderList.totalPrice;
				//商品总数量
				this.totalCount = orderList.totalCount;
				//商品运费
				this.freight = orderList.freight
				// 用户id
				this.userId = orderList.userId;
				console.log(this.userId,"用户id");
				console.log(orderList.totalPrice);
				// 商品列表明细
				this.orderListDetial = orderList.orderDetialList;
				console.log(this.orderListDetial);
				// this.orderListDetial.forEach( item => {
				// 	this.totalPrice =this.totalPrice + Number(item.price *item.count);
				// 	console.log("1111",this.totalPrice)
				// })
			},
			goPay() {
				uni.showLoading({
					title:'正在提交订单'
				})
				// var addressObj = {
				// 	addressId:this.address.id,
				// 	tel:this.address.tel
				// };
				var obj = {};
				// console.log(this.orderListDetial);
				for (var i = 0; i<this.orderListDetial.length; i++ ){
					var sku = this.orderListDetial[i];
					obj['orderDetail['+i+'].skuId'] = sku.skuId;
					obj['orderDetail['+i+'].count'] = sku.count;
					obj['orderDetail['+i+'].price'] = sku.price;
				}
				console.log(obj);
				var addOrder = {
					userId:this.userId,
					count:this.totalCount,
					price:this.totalPrice,
					freight:this.freight,
					addressId:this.addressId,
					...obj,
				}
				console.log(addOrder,"添加订单的参数");
				http.post("/api/leju/front/order/addOrderBatch",{
					...addOrder,
				}).then(res => {
					console.log(res);
					if(res.data.code == "S"){
						var orderId = res.data.orderId;
						// 将订单id携带跳转至付款页面
						uni.navigateTo({
							url:'/pages/kind/goPay/goPay?orderId='+orderId+'&price='+this.totalPrice
						})
					}else{
						uni.showToast({
							title:"提交失败!"
						})
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: wheat;
	}
	.notpay{
		width:750rpx;
		background:wheat;
		padding:0.01rpx;
		// .fixed{
		// 	width:100%;
		// 	height: 160rpx;
		// 	position:fixed;
		// 	left:0;
		// 	top:0;
		// 	z-index:999;
		// }
		.header{
			width:100%;
			height: 80rpx;
			background: #5D4E49;
			padding:0.1rpx;
			image{
				position:absolute;
				left:33rpx;
				top:28rpx;
				width:24px;
				height: 38rpx;
			}
			text{
				display:block;
				width:120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align:center;
				font-weight:bolder;
				color:white;
				margin:0 auto;
				margin-top:20rpx;
				font-size:40rpx;
			}
		}
		.second{
			width:600rpx;
			height: 80rpx;
			font-size:40rpx;
			margin:20rpx auto;
			border-bottom:1rpx solid gray;
		}
		.address{
			width:600rpx;
			height: 100rpx;
			margin:20rpx auto;
			border-bottom:1rpx solid gray;
			text{
				display: block;
			}
		}
		.headers{
			width:600rpx;
			margin:20rpx auto;
			// display:flex;
			// justify-content: space-between;
			// align-items:center;
			font-size:12rpx;
		},
		.orderlist{
			width:660rpx;
			margin:20rpx auto;
			border-radius:30rpx;
			background-color: pink;
			.ordedetail{
				width:600rpx;
				height: 200rpx;
				margin:0 auto;
				border-top: 1rpx solid gray;
				border-bottom: 1rpx solid gray;
				display:flex;
				justify-content: space-between;
				align-items:center;
				font-size:12rpx;
				.left{
					width:100rpx;
					height: 100rpx;
					image{
						width:100%;
						height: 100%;
					}
				}
				.middle{
					text{
						display: block;
					}
				}
				.right{
					text{
						display: block;
					}
				}
				
			}
		}
	}
</style>
